<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
</head>
<body>
<div></div>
<div class="wrapper">
    <button class="call-native" onclick="callNative()">调用原生showToast方法</button>
    <button class="call-native" onclick="callNative2()">调用原生test方法</button>
    <button class="btn">显示对话框</button>
    <button class="btn1">修改内容</button>
    <p class="msg"></p>
</div>
</body>
<script>
        function showAlert(){
            alert("原生调用JS函数")
            return "H5 showAlert()函数的返回值"
        }

        function show(msg){
            alert("原生调用JS带参的函数")
            return msg + " H5 show()函数的返回值"
        }

        const callNative = () => {
           window.yi.showToast('JS调用原生showToast()方法，原生方法没有返回值')
        }

         const callNative2 = () => {
            // 调用原生方法，并返回结果
           let msg = window.yi.test()
           updateMsg(msg)
        }

        let btn =document.querySelector(".btn");
        btn.addEventListener('click',()=>{
            console.log("弹出alert dialog...")
            alert("from h5 alert") // 会阻塞当前流程，确认才会继续执行
            console.log("已经确认了...")
        })

        let btn1 =document.querySelector(".btn1");
        btn1.addEventListener('click',()=>{
            updateMsg("h5自己修改内容")
        })

        function updateMsg(msg){
            let msgEle =document.querySelector(".msg");
            msgEle.innerHTML = msg
        }

    </script>
</html>